<template>
  <div market-component>
    <search
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      position="absolute"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search"></search>
      <div class="content"></div>
  </div>
</template>

<script>
import './market.styl'
import { Search } from 'vux'

export default {
    components: {
        Search
    },
    methods:{
        resultClick (item) {
            window.alert('you click the result item: ' + JSON.stringify(item))
        },
        getResult (val) {
            console.log('on-change', val)
            this.results = val ? getResult(this.value) : []
        },
        onSubmit () {
            this.$refs.search.setBlur()
            this.$vux.toast.show({
                type: 'text',
                position: 'top',
                text: 'on submit'
            })
        },
        onFocus () {
            console.log('on focus')
        },
            onCancel () {
                console.log('on cancel')
            }
        },
    data(){
        return {
            results: [],
            value: 'test'
        }
  }
}
</script>